<template>
  <page-layout class="workPlace_wrapper">
    <a-card>
      <div slot="extra" class="workPlace">
        <a-tabs default-active-key="1" @change="tabChangeFn">
          <a-tab-pane key="1" tab="待办">
            <a-row type="flex" justify="space-between">
              <a-col v-for="(item,index) in statisticsDataArr" :key="item.value" class="header-info">
                <div class="dsp_flex" @click="toDoClkFn('')">
                  <!-- add_cut advance paid_in make_up adjusted_basis error-->
                  <a-avatar v-if="index==0" style="margin-right:16px;" shape="square" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624356488633-424338884137466.png" />
                  <a-avatar v-else-if="index==1" style="margin-right:16px;" shape="square" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624428227579-3826388174171895.png" />
                  <a-avatar v-else-if="index==2" style="margin-right:16px;" shape="square" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624428256054-25916220448420346.png" />
                  <a-avatar v-else-if="index==3" style="margin-right:16px;" shape="square" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624428280533-32456006141203675.png" />
                  <a-avatar v-else-if="index==4" style="margin-right:16px;" shape="square" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624428365788-8001699259171908.png" />
                  <a-avatar v-else-if="index==5" style="margin-right:16px;" shape="square" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624428387690-19092796427518333.png" />
                  <a-statistic :title="item.value | valueFilter" :value="item.num" class="demo-class"></a-statistic>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" tab="雇员管理" force-render :disabled="employeeManagement">
            <a-row type="flex" justify="space-between">
              <a-col v-for="(item,index) in statisticsDataArr" :key="item.value" class="header-info">
                <div class="dsp_flex" @click="employeeMangeClkFn">
                  <a-avatar v-if="index==0" shape="square" style="margin-right:16px;" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624356620251-2435556472934357.png" />
                  <a-avatar v-else-if="index==1" shape="square" style="margin-right:16px;" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624356553007-844078991966331.png" />
                  <a-avatar v-else-if="index==2" shape="square" style="margin-right:16px;" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624356672761-16398254694531977.png" />
                  <a-avatar v-else-if="index==3" shape="square" style="margin-right:16px;" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624356529961-8454501687683733.png" />
                  <a-statistic :title="item.value | valueFilter" :value="item.num" class="demo-class"></a-statistic>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="3" tab="项目管理" :disabled="projectManagement">
            <a-row type="flex" justify="space-between">
              <a-col v-for="(item,index) in statisticsDataArr" :key="item.value" class="header-info">
                <div class="dsp_flex" @click="proMangeClkFn('')">
                  <!-- all projectInfoFullIf projectMemberFullIf -->
                  <a-avatar v-if="index==0" shape="square" style="margin-right:16px;" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624428410881-006530800480359478.png" />
                  <a-avatar v-else-if="index==1" shape="square" style="margin-right:16px;" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624356620251-2435556472934357.png" />
                  <a-avatar v-else-if="index==2" shape="square" style="margin-right:16px;" :size="56" src="https://tking-test.oss-cn-hangzhou.aliyuncs.com/assets/202106/1624428430384-0540201033951917.png" />
                  <a-statistic :title="item.value | valueFilter" :value="item.num" class="demo-class"></a-statistic>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
      <template>
        <!-- 下载demo -->
        <!-- <a-button @click="downloadFile">download</a-button> -->
        <a-row class="bottom_div" style="margin: 0 -12px">
          <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card class="tableCard" title="" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
              <h3 slot="extra" class="ant-dropdown-link cardTitle">待办清单</h3>
              <a slot="extra" class="ant-dropdown-link" v-if="dataSource.length != 0" @click="onViewAll">查看全部</a>
              <a-table class="table" style="padding:20px 24px;" :columns="columns" :data-source="dataSource" rowKey="id" :pagination="false">
                <template v-for="col in ['id','typeName','projectName', 'statusName', 'beforeNodePrincipalName', 'createTime', 'operation']" :slot="col" slot-scope="text, record">
                  <div :key="col">
                    <span v-if="col == 'statusName' ">
                      {{record.statusName ? record.statusName : '-'}}
                    </span>
                    <span v-else-if="col == 'createTime'">
                      <span>{{record.createTime | dateFilter}}</span>
                    </span>
                    <span v-else>{{text ? text : '-'}}</span>
                  </div>
                </template>

                <template slot="operation" slot-scope="text, record">
                  <a class="ant-dropdown-link" @click="onDeal(record)">处理</a>
                </template>
              </a-table>
            </a-card>
          </a-col>

          <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :title="$t('access')" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
              <div class="item-group quickEntry_div">
                <a class="quickEntry_a" v-for="(item, index) in quickMenuData" :key="index" :class="item.name == '工作台' ? 'hide' : ''" :title="item.name" @click="goPage(item.h5Url)">
                  <a-avatar :size="40" :icon="item.image | iconFilter" :style="{background: bgFilterFn(item.image)}" />
                  <p>{{item.name.slice(0,4)}}<span v-if="item.name.length > 4">...</span></p>
                </a>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </template>
      <!-- <icon-font type="toggle" />
      <a-button @click="show">111</a-button>-->
      <drawer title="1111" @getList="getList" :visible.sync="visible">
        1111
      </drawer>
    </a-card>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import { mapState, mapMutations } from 'vuex'
import {
  workplaceStatisticsApi,
  workplaceTaskListApi,
  quickMenuApi
} from '@/services/socialSecurityFund'
import {
  testPostDownloads
} from '@/services/os'
import { transferDate, exportFile } from '@/utils/util'
import { testPostDownload } from '@/services/api'

import Drawer from '@/pages/components/drawer'
export default {
  name: 'WorkPlace',
  components: { PageLayout, Drawer },
  i18n: require('./i18n'),
  data () {
    return {
      visible: false,
      employeeManagement: true,
      projectManagement: true,
      page: 1,
      pageSize: 10,
      total: 0,
      activeKey: 1,
      columns: [
        {
          title: "待办id",
          dataIndex: "workId",
          scopedSlots: { customRender: "workId" }
        },
        {
          title: "待办类型",
          dataIndex: "typeName",
          scopedSlots: { customRender: "typeName" }
        },
        {
          title: "项目名称",
          dataIndex: "projectName",
          scopedSlots: { customRender: "projectName" }
        },
        {
          title: "状态",
          dataIndex: "statusName",
          scopedSlots: { customRender: "statusName" }
        },
        {
          title: "上个节点",
          dataIndex: "beforeNodePrincipalName",
          scopedSlots: { customRender: "beforeNodePrincipalName" }
        },
        {
          title: "转入时间",
          dataIndex: "createTime",
          scopedSlots: { customRender: "createTime" }
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ],
      dataSource: [],
      projects: [],
      loading: true,
      activities: [],
      teams: [],
      welcome: {
        timeFix: '',
        message: ''
      },
      statisticsDataObj: {},
      quickMenuData: []
    }
  },
  filters: {
    valueFilter (str) {
      switch (str) {
        case 'addCutCount':
          return '增减员'
        case 'receiveCount':
          return '社保公积金预收账单'
        case 'paidCount':
          return '社保公积金实缴账单'
        case 'makeupCount':
          return '补缴'
        case 'adjustBasisCount':
          return '调基'
        case 'errorCount':
          return '社保公积金异常'
        case 'corvidaeCount':
          return '待完善资料'
        case 'unEntryCount':
          return '待入职'
        case 'unDimissionCount':
          return '待离职'
        case 'personnelChangesCount':
          return '人员异动'
        case 'catergoriesCount':
          return '负责项目'
        case 'baseCorvidaeCount':
          return '基本信息待完善'
        case 'waitForDistributionCount':
          return '成员待分配'
      }
    },

    dateFilter (str) {
      return str ? transferDate(str, 0) : '-'
    },

    nameFilter (name) {
      console.log('55', name)
      switch (name) {
        case '权限管理':
          return 'ExceptionOutlined'
      }
    },

    iconFilter (i) {
      if (i.indexOf('/') != -1) {
        return i.substring(0, i.indexOf('/'))
      } else {
        return i
      }
    }
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', ['lang']),

    statisticsDataArr () {
      let _arr = []
      let _arr2 = []
      if (Object.keys(this.statisticsDataObj).length != 0) {
        _arr.push(this.statisticsDataObj[Object.keys(this.statisticsDataObj)[this.activeKey - 1]])
      }

      _arr.forEach(item => {
        for (let key in item) {
          let _obj = {
            num: item[key],
            value: key
          }
          _arr2.push(_obj)
        }
      })
      return _arr2
    }
  },
  created () {
    this.wpApiIvk()
  },
  mounted () {
    this.authTab()
  },
  methods: {
    show () {
      this.visible = true;
    },
    getList () {
      console.log("我刷刷刷！", this)
    },
    downloadFile () {
      testPostDownloads({ a: 11 }).then(res => {
        // console.log(res)
      })
    },
    authTab () {
      let auth = this.$Storage.get('admin.routes')[0].children;
      let authStr = auth.map(item => item.router)
      this.employeeManagement = !authStr.includes('employeeManagement')
      this.projectManagement = !authStr.includes('projectManagement')
    },
    wpApiIvk () {
      workplaceStatisticsApi().then(res => {
        let { code, msg, data } = res.data
        if (code === 200) {
          this.statisticsDataObj = data
        } else {
          this.$message.error(msg)
        }
      })

      workplaceTaskListApi().then(res => {
        let { code, msg, data } = res.data
        if (code === 200) {
          this.dataSource = data
        } else {
          this.$message.error(msg)
        }
      })

      quickMenuApi().then(res => {
        let { code, msg, data } = res.data
        if (code === 200) {
          this.quickMenuData = data
        } else {
          this.$message.error(msg)
        }
      })
    },

    goPage (fullPath) {
      // authorityManagement 权限管理 
      // contractingSubjectManagement 签约主体 
      // contractManagement 合同管理 
      // enterpriseAccountManagement 企业端小程序账号管理 
      // employeeCenter 雇员中心 
      // employeeBatchProcessing 员工批量处理 
      // projectCenter 项目中心 
      // insuredPersonsManagement 参保人管理 
      // policyLibrary 政策库 
      // supplierManagement 供应商管理 
      // socialSecurityFundBill 账单 
      // laborDisputesManagement 劳资纠纷管理
      let [form, to] = [
        ['authorityManagement', 'contractingSubjectManagement', 'contractManagement', 'enterpriseAccountManagement', 'employeeCenter', 'employeeBatchProcessing', 'projectCenter', 'insuredPersonsManagement', 'policyLibrary', 'supplierManagement', 'socialSecurityFundBill', 'laborDisputesManagement'],
        ['/systemConfig/authorityManagement', '/systemConfig/contractingSubjectManagement', '/systemConfig/contractManagement', '/systemConfig/enterpriseAccountManagement', '/employeeManagement/employeeCenter', '/pages/components/batchProcessing/index', '/projectManagement/projectCenter', '/socialSecurityFund/tabs/tab1', '/socialSecurityFund/tabs/tab2', '/socialSecurityFund/tabs/tab3', '/socialSecurityFund/tabs/tab4', '/laborDisputes/laborDisputes'],
      ]
      let path = [...to][[...form].findIndex(item => item == fullPath)]
      this.$router.push(path)
    },

    onDeal (data) {
      const nowToDoItemId = data.id;
      let type;
      type = ['公积金增员', '公积金减员', '社保增员', '社保减员'].includes(data.typeName) ? 'add_cut' : ['公积金补缴', '社保补缴'].includes(data.typeName) ? 'make_up' : ['公积金调基', '社保调基'].includes(data.typeName) ? 'adjusted_basis' : ['社保公积金实缴账单'].includes(data.typeName) ? 'paid_in' : ['社保公积金预收账单'].includes(data.typeName) ? 'advance' : ['薪税计算账单'].includes(data.typeName) ? 'salary_tax' : ['公积金增员异常', '公积金减员异常', '社保增员异常', '社保减员异常', '公积金补缴异常', '社保补缴异常', '公积金调基异常', '社保调基异常'].includes(data.typeName) ? 'error' : ''
      this.$router.push("todoOrder/orderList?type=" + type + '&id=' + nowToDoItemId)
    },

    onViewAll () {
      this.$router.push("todoOrder/orderList")
    },

    tabChangeFn (activeKey) {
      this.activeKey = activeKey
    },

    bgFilterFn (i) {
      if (i.indexOf('/') != -1) {
        return i.substring(i.indexOf('/') + 1, i.length)
      }
    },

    toDoClkFn (type) {
      this.$router.push("todoOrder/orderList?type=" + type)
    },

    employeeMangeClkFn () {
      this.$router.push("employeeManagement/employeeCenter")
    },

    proMangeClkFn (type) {
      this.$router.push("projectManagement/projectCenter?type=" + type)
    }
  },
}
</script>

<style lang="less" scoped>
@import "index";
/deep/ .extra {
  width: 100%;
}
.workPlace {
  width: 100%;
  .head-desc .ant-list-item-meta-title a {
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px !important;
    font-weight: normal !important;
  }
  .head-desc .ant-list-item-meta-description {
    font-size: 32px !important;
    color: rgba(0, 0, 0, 0.85);
  }
  .header-info {
    display: flex;
    flex: 1;
  }
  /deep/.ant-tabs-content.ant-tabs-content-animated.ant-tabs-top-content {
    margin-top: 30px;
  }
  .ant-row-flex-space-between {
    justify-content: space-around;
  }
}
.workPlace_wrapper {
  /deep/.ant-card.ant-card-bordered {
    background: #f0f2f5;
  }
  /deep/.ant-card-head {
    background: #fff;
    padding-bottom: 24px;
    .ant-card-extra {
      width: 100%;
    }
  }
  /deep/.ant-card-body {
    padding: 24px 0 0;
  }
}
.bottom_div {
  /deep/.ant-card-head {
    padding-bottom: 0;
  }
}
.quickEntry_a {
  text-align: center;
  p {
    margin-top: 10px;
  }
}
.quickEntry_div {
  padding: 20px 0 8px;
}

.hide {
  display: none !important;
}
/deep/.header-info.ant-col {
  div {
    cursor: pointer;
  }
}
.cardTitle {
  display: inline-block;
}
.tableCard {
  /deep/.ant-card-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.dsp_flex {
  display: flex;
  display: -webkit-flex;
}
</style>
